<template>
  <div>
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>
        <icon-menu-unfold />
      </a-breadcrumb-item>
      <a-breadcrumb-item>报警管理</a-breadcrumb-item>
      <a-breadcrumb-item>报警统计</a-breadcrumb-item>
    </a-breadcrumb>

    <a-card>
      <!-- 查询条件 -->
      <a-row>
        <a-col :flex="1" style="margin-top: 4px">
          <a-form :model="searchModel" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }" label-align="left" auto-label-width>
            <a-row :gutter="12">
              <!-- 事件状态 -->
              <a-col :span="8">
                <a-form-item label="事件状态">
                  <a-select v-model="searchModel.triggerStatus" placeholder="全部状态" allow-clear>
                    <a-option value="0">发生中</a-option>
                    <a-option value="10">已恢复</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-divider style="height: 35px" direction="vertical" />
              <a-col :flex="'86px'" style="text-align: right">
                <a-space :size="18">
                  <a-button type="primary" @click="onSearch">
                    <template #icon>
                      <icon-search />
                    </template>
                    {{ '查询' }}
                  </a-button>
                </a-space>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>

      <!-- 分割线 -->
      <a-divider style="margin-top: 0" />

      <!-- 表格 -->
      <a-table :loading="loading" row-key="id" :bordered="{ wrapper: true, cell: true }"
               :pagination="pagination" :columns="tabColumns" :data="renderData">
      </a-table>
    </a-card>

    <!-- 图表区域 -->
    <a-card class="general-card" style="margin-top: 12px" title="报警级别统计图">
      <CustomChart :options="chartLevelData" autoresize height="460px" />
    </a-card>

    <a-card class="general-card" style="margin-top: 12px" title="报警类型统计图">
      <CustomChart :options="chartCategoryData" autoresize height="460px" />
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import { BasePagination } from '../../apis/common';
import useLoading from '../../utils/loading';
import { TableColumnData } from '@arco-design/web-vue';
import { getStatisticlist, getLevelStaticList, getCategoryStaticList } from '../../apis/call';
import CustomChart from '../../components/custom-chart/index.vue';
import { handleChartData } from '../../utils/charts';

const { loading, setLoading } = useLoading(true);

// 报警统计查询项
const searchModel = ref({
  // 事件状态
  triggerStatus: ''
});

// 表格分页配置
const pagination: any = reactive({ ...BasePagination() });
const customColumns = ref<any>([]);

// 设置表格列
const tabColumns = computed<TableColumnData[]>(() => customColumns.value);

// 表格数据
const renderData = ref<any>([]);

/**
 * 查询表格数据
 */
const fetchData = async () => {
  setLoading(true);
  try {
    const res: any = await getStatisticlist({
      triggerStatus: searchModel.value.triggerStatus
    });
    if (res.data.code === 200) {
      pagination.total = res.data.total;
      if (res.data.rows && res.data.rows.length > 0) {
        const columns: TableColumnData[] = [];
        const data: any = [];
        res.data.rows.forEach((item: any, index: number) => {
          const info: any = {};
          item.forEach((cItem: any, cIndex: number) => {
            if (index === 0) {
              columns.push({
                title: cItem.key,
                dataIndex: cItem.key,
                align: cIndex <= 1 ? 'left' : 'center'
              });
            }
            info[cItem.key] = cItem.value;
          });
          data.push(info);
        });
        customColumns.value = columns;
        renderData.value = data;
      }
    }
  } catch (err) {
    // 错误处理
  } finally {
    setLoading(false);
  }
};

/**
 * 首次加载
 */
onMounted(async () => {
  await fetchData();
  await fetchLevelData();
  await fetchCategoryData();
});

/**
 * 查询按钮点击事件
 */
const onSearch = async () => {
  await fetchData();
};

// 报警级别统计图数据
const chartLevelData = ref<any>([]);

/**
 * 获取报警级别统计图数据
 */
const fetchLevelData = async () => {
  try {
    const res = await getLevelStaticList();
    if (res.data.code === 200) {
      chartLevelData.value = handleChartData(res.data.data);
    } else {
      chartLevelData.value = [];
    }
  } catch (ex) {
    // 错误处理
  }
};

// 报警类型统计图数据
const chartCategoryData = ref<any>([]);

/**
 * 获取报警类型统计图数据
 */
const fetchCategoryData = async () => {
  try {
    const res = await getCategoryStaticList();
    if (res.data.code === 200) {
      chartCategoryData.value = handleChartData(res.data.data);
    } else {
      chartCategoryData.value = [];
    }
  } catch (ex) {
    // 错误处理
  }
};
</script>